<template>
	<view>
		<scroll-view class="scroll-view" :style="{height:swiperHeight}" scroll-y @scrolltolower="onreachBottom"
			@scroll="pageScroll" upper-threshold="40" @scrolltoupper="scrolltoupper">
			<view class="option-wrap">
				<!-- 填写上下车地址 -->
				<view class="address-card">
					<view class="input-group">
						<view class="input" :class="{cur:qd}" @click="clickCity('qd')">
							{{qd || '您在哪上车'}}
						</view>
						<!-- 			<u-input @cl v-model="qd" placeholder-style="color:#CAE1D6;" input-align="center" placeholder="您在哪上车">
						</u-input> -->
						<image src="../../static/btn_change.png" mode="widthFix" @click="reversalSearch"></image>
						<view class="input" :class="{cur:zd}" @click="clickCity('zd')">
							{{zd || '您在哪下车'}}
						</view>
						<!-- <u-input v-model="zd" placeholder-style="color:#CAE1D6;" input-align="center"
							placeholder="您在哪下车">
						</u-input> -->
					</view>
					<view class="flex ">
						<view class="n-btn-primary search" @click="searchAction">
							查询
							<view @click="clearSearch" class="del size-24 gray-9">清除查询</view>
						</view>
					</view>
				</view>
				<!-- 分类标签 -->
				<view class="sticky-wrap">
					<view :class="{sticky:stickyFlag}">
						<scroll-view scroll-x="true" class="badge">
							<view class="item" v-for="item in badgeList" :key="item.id"
								:class="{cur:currentBadge==item.id}" @click="selectBadge(item.id)">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="list-1">
				<u-waterfall v-model="list" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="item u-skeleton-fillet" v-for="(item,i) in leftList" :key="item.id"
							@click="goDetail(item.id,item.room_id)">
							<u-lazy-load :image="item.cover"></u-lazy-load>
							<!-- 线路 -->
							<block v-if="item.dateType==2">
								<view class="setting-2">
									<view class="count">
										<image src="../../static/icon-like1.png" mode=""></image>
										<text class="mr-20">{{item.collection_num || 0}}</text>
										<image src="../../static/icon-car1.png" mode=""></image>
										<text>{{item.quote_num || 0}}</text>
									</view>
								</view>
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.title}}
									</view>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between user">
									<view class="price">
										¥{{item.min_price}}-{{item.max_price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 包车 -->
							<block v-if="item.dateType==3">
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.brand}}{{item.model}}{{item.color}}
									</view>
								</view>
								<view class="desc">
									{{item.number_plate}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 租车 -->
							<block v-if="item.dateType==4">
								<view class="setting">
									<view class="chuzu-status chuzu-status-1" v-if="item.car_status==1">
										<text>●</text>出租中
									</view>
									<view class="chuzu-status chuzu-status-2" v-if="item.car_status==0">
										<text>●</text>空闲中
									</view>
								</view>
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.address}}
									</view>
								</view>
								<view class="desc flex-between">
									<view>{{item.brand}}{{item.model}}{{item.color}}</view>
									<view>{{item.number_plate}}</view>
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="item u-skeleton-fillet" v-for="(item,i) in rightList" :key="item.id"
							@click="goDetail(item.id,item.room_id)">
							<u-lazy-load :image="item.cover"></u-lazy-load>
							<!-- 线路 -->
							<block v-if="item.dateType==2">
								<view class="setting-2">
									<view class="count">
										<image src="../../static/icon-like1.png" mode=""></image>
										<text class="mr-20">{{item.collection_num || 0}}</text>
										<image src="../../static/icon-car1.png" mode=""></image>
										<text>{{item.quote_num || 0}}</text>
									</view>
								</view>
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.title}}
									</view>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between user">
									<view class="price">
										¥{{item.min_price}}-{{item.max_price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 包车 -->
							<block v-if="item.dateType==3">
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.brand}}{{item.model}}{{item.color}}
									</view>
								</view>
								<view class="desc">
									{{item.number_plate}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 租车 -->
							<block v-if="item.dateType==4">
								<view class="setting">
									<view class="chuzu-status chuzu-status-1" v-if="item.car_status==1">
										<text>●</text>出租中
									</view>
									<view class="chuzu-status chuzu-status-2" v-if="item.car_status==0">
										<text>●</text>空闲中
									</view>
								</view>
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.address}}
									</view>
								</view>
								<view class="desc flex-between">
									<view>{{item.brand}}{{item.model}}{{item.color}}</view>
									<view>{{item.number_plate}}</view>
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
						</view>
					</template>
				</u-waterfall>
				<view class="pb-80">
					<u-loadmore :status="status"></u-loadmore>
				</view>
			</view>
		</scroll-view>
		<u-popup v-model="cityListShow" mode="left" height="100%" width="100%">
			<citySelect @back_city="back_city"></citySelect>
		</u-popup>
	</view>
</template>

<script>
	import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
	export default {
		name: "radio",
		data() {
			return {
				cityListShow:false,
				slectType:'',
				badgeList: [
					// {
					// 	name: '猜你喜欢',
					// 	id: 1
					// },
					{
						name: '线路',
						id: 2
					},
					{
						name: '包车',
						id: 3
					},
					{
						name: '租车',
						id: 4
					}
				], //推荐标签分类
				searchHeight: 0,
				stickyFlag: false,
				currentBadge: 2, //当前分类标签下标
				qd: '',
				zd: '',
				page: 1,
				list: [],
				status: 'loading', //loadmore loading / nomore
				triggered: false,
			};
		},
		props: {
			swiperHeight: {
				type: [String, Number],
				default: 0
			},
			// searchHeight: {
			// 	type: [String, Number],
			// 	default: 0
			// },
		},
		components:{
			citySelect
		},
		mounted() {
			this._freshing = false;
			this.getElInfo()
			this.radioxl()
		},
		methods: {

			async getElInfo() {
				this.$u.getRect('.address-card').then(res => {
					this.searchHeight = res.height
					console.log('t=电台高度')
					console.log(this.searchHeight)
				})

			},
			back_city(e) {
				if (e == undefined) {
					this.cityListShow = false
					return
				}
				if((typeof e =='string')&&e.constructor==String){
					if(this.slectType=='qd'){
						this.qd = e
					}
					if(this.slectType=='zd'){
						this.zd = e
					}
					this.cityListShow = false
				}else{
					if(this.slectType=='qd'){
						this.qd = e.cityName
					}
					if(this.slectType=='zd'){
						this.zd = e.cityName
					}
					this.cityListShow = false
				}
			},
			// 选择地址
			clickCity(type) {
				this.slectType = type
				this.cityListShow = true
			},
			// 翻转起点终点
			reversalSearch() {
				[this.zd, this.qd] = [this.qd, this.zd]
			},
			clearSearch(){
				this.qd = ''
				this.zd = ''
				this.searchAction()
			},
			// 搜索
			searchAction() {
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				this.list = []
				this.page = 1
				this.status = 'loading'
				if (this.currentBadge == 1) {
					this.getLike()
				}
				if (this.currentBadge == 2) {
					// 线路
					this.radioxl()
				}
				if (this.currentBadge == 3) {
					// 包车
					this.radiobc()
				}
				if (this.currentBadge == 4) {
					// 租车
					this.radiozc()
				}
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				// if (this._freshing) return;
				// this._freshing = true;
				// setTimeout(() => {
				// 	this.triggered = false;
				// this._freshing = false;
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				this.list = []
				this.page = 1
				this.status = 'loading'
				if (this.currentBadge == 1) {
					this.getLike()
				}
				if (this.currentBadge == 2) {
					// 线路
					this.radioxl()
				}
				if (this.currentBadge == 3) {
					// 包车
					this.radiobc()
				}
				if (this.currentBadge == 4) {
					// 租车
					this.radiozc()
				}
				// }, 500);
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			scrolltoupper() {
				this.stickyFlag = false
			},
			pageScroll(e) {
				let scrollTop = e.detail.scrollTop
				if (scrollTop > this.searchHeight + 115) {
					this.stickyFlag = true
				} else {
					this.stickyFlag = false
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status === 'nomore') {
					return
				}
				this.page++
				this.status = 'loading'
				// this.getList()
			},
			onpullDownRefresh() {
				this.page = 1
				this.list = []
				this.status = 'loading'
				console.log('触发下拉')
				if (this.currentBadge == 1) {
					this.getLike()
				}
				if (this.currentBadge == 2) {
					// 线路
					this.radioxl()
				}
				if (this.currentBadge == 3) {
					// 包车
					this.radiobc()
				}
				if (this.currentBadge == 4) {
					// 租车
					this.radiozc()
				}

			},
			// 选择标签
			selectBadge(e) {
				this.currentBadge = e
				this.page = 1
				this.list = []
				this.status = 'loading'
				// 清楚瀑布流
				this.$refs.uWaterfall.clear();
				if (this.currentBadge == 1) {
					this.getLike()
				}
				if (this.currentBadge == 2) {
					// 线路
					this.radioxl()
				}
				if (this.currentBadge == 3) {
					// 包车
					this.radiobc()
				}
				if (this.currentBadge == 4) {
					// 租车
					this.radiozc()
				}
			},
			// 租车列表
			radiozc() {
				this.$api.radiozc({
					page: this.page,
					qd: this.qd,
					zd: this.zd,
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let zc = res.data.data
						zc.forEach((item, i) => {
							zc[i].dateType = 4
						})
						this.list.push(...zc)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 包车列表
			radiobc() {
				this.$api.radiobc({
					page: this.page,
					qd: this.qd,
					zd: this.zd,
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let bc = res.data.data
						bc.forEach((item, i) => {
							bc[i].dateType = 3
						})
						this.list.push(...bc)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 行程列表
			radioxl() {
				this.$api.radioxl({
					page: this.page,
					qd: this.qd,
					zd: this.zd,
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let xc = res.data.data
						xc.forEach((item, i) => {
							xc[i].dateType = 2
						})
						this.list.push(...xc)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},

			goDetail(id, room_id) {

				let is_auth = uni.getStorageSync('userInfo').is_auth

				if (is_auth != 1) {
					uni.showModal({
						title: '温馨提示',
						content: '您还没有实名认证，点击确定完成认证信息',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages_user/realname_authentication/realname_authentication'
								})
							}
						}
					})
					return
				}

				if (this.currentBadge == 1) {
					uni.navigateTo({
						url: '/pages_user/myRoadBook/detail?id=' + id
					})
				}
				// 线路
				if (this.currentBadge == 2) {
					uni.navigateTo({
						url: '/pages_live/radioDetail/radioDetail?line_id=' + id + '&room_id=' + room_id
					})
				}
				// 包车
				if (this.currentBadge == 3) {
					uni.navigateTo({
						url: '/pages_live/charteredRadio/charteredRadio?line_id=' + id + '&room_id=' + room_id
					})
				}
				// 租车
				if (this.currentBadge == 4) {
					uni.navigateTo({
						url: '/pages_live/carRentalRadio/carRentalRadio?line_id=' + id + '&room_id=' + room_id
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tabs-item {
		font-weight: 600 !important;
		transition: 200ms;
	}

	/deep/ .u-scroll-bar {
		margin-left: 5px;
	}

	page {
		height: 100vh;
		overflow-y: hidden;
	}

	.header {
		background-image: linear-gradient(90deg, #338b5b, #308a57);
		padding: 10rpx 30rpx 0;

		.tab-wrap {
			@include flex-between;

			.sign-in {
				width: 58upx;
			}

			.rank {
				width: 58upx;
			}
		}
	}

	.option-wrap {
		background: #308a57;
		padding: 20upx 30upx 30upx;
	}

	.search-wrap {
		background: url(https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20221008/69527e06102d98f0767d9ab5ca8fb3c2.png) no-repeat;
		height: 72upx;
		background-size: 100% 100%;
		@include flex;

		image {
			width: 34upx;
			margin: 0 10upx 0 20upx;
		}

		.text {
			font-size: 28upx;
			color: #318B59;
			margin-right: 10upx;
		}

		.btn {
			width: 120upx;
			height: 60upx;
			background: #318A59;
			box-shadow: 0px 3upx 6upx rgba(49, 138, 89, 0.2);
			border-radius: 32upx;
			margin-right: 6upx;
			font-size: 30upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60upx;
		}
	}

	.badge {
		white-space: nowrap;
		padding: 12px 0 20upx;

		.item {
			display: inline-block;
			line-height: 22px;
			background: rgba(255, 255, 255, .2);
			border-radius: 22upx;
			padding: 0 14upx;
			min-width: 90upx;
			text-align: center;
			font-size: 24upx;
			color: rgba(255, 255, 255, .5);
			// margin: 24upx 14upx 40upx 0;
			margin-right: 14upx;
		}

		.item.cur {
			color: #318A58;
			background: #fff;
		}
	}

	.swiper {
		.scroll-view {
			width: 100%;
		}
	}

	.sticky-wrap {
		height: 46px;
	}

	.sticky {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		padding: 0 30upx;
		z-index: 10000;
		background: #308a57;
	}

	.swiper-item-3 {
		.placeholder {
			height: 30upx;
			background: #308a57;
		}

		.title-1 {
			font-size: 32upx;
			font-weight: bold;
			color: #999999;
			padding: 30upx 30upx 26upx;
			border-radius: 30upx 30upx 0 0;
			margin-top: -30upx;
			background: #fff;
		}

		.user-list {
			white-space: nowrap;
			padding: 0 20upx;
			border-bottom: 16upx solid #f5f5f5;
			background: #fff;

			.item {
				width: 142upx;
				text-align: center;
				display: inline-block;
				padding-bottom: 30upx;

				.avatar {
					width: 80upx;
					height: 80upx;
					min-height: 80upx;
					border: 1upx solid #519D76;
					border-radius: 50%;
				}
			}
		}
	}

	.swiper-item-4 {
		.like {
			font-size: 20upx;
			font-weight: 400;
			color: #999999;
			@include flex;
		}
	}

	.list-1 {
		padding: 30upx;
		margin-top: -30upx;
		background: #fff;
		border-radius: 30upx 30upx 0 0;

		.item:not(:last-child) {
			border-bottom: 1px solid #EFEFEF;
		}

		.item {
			width: 335upx;
			border-radius: 16upx;
			position: relative;
			margin-bottom: 35upx;

			.setting {
				position: absolute;
				left: 0;
				top: 0;
				padding: 10upx;
				@include flex-between;
				width: 100%;

				.date {
					line-height: 40upx;
					background: rgba(255, 142, 28, .8);
					font-size: 20upx;
					color: #FFFFFF;
					padding: 0 12upx;
					border-radius: 4upx;
				}

				.chuzu-status {
					width: 125upx;
					line-height: 48upx;
					text-align: center;
					border-radius: 16upx 0px 16upx 0px;
					font-size: 26upx;
					color: #FFFFFF;

					text {
						font-size: 20upx;
						font-weight: 400;
					}

					&-1 {
						background: #FF8E1C;
					}

					&-2 {
						background: #519D76;
					}
				}

				.count {
					line-height: 40upx;
					background: rgba(49, 138, 88, 1);
					font-size: 20upx;
					color: #FFFFFF;
					border-radius: 4upx;
					padding: 0 12upx;
					@include flex-between;

					image {
						width: 24upx;
						height: 24upx;
						margin-right: 4upx;
					}

				}


			}

			.setting-1 {
				position: absolute;
				left: 0;
				top: 0;
				padding: 10upx;
				@include flex-end;
				width: 100%;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.4000) 0%, rgba(0, 0, 0, 0) 100%);

				.date {
					line-height: 40upx;
					background: rgba(255, 142, 28, .8);
					font-size: 20upx;
					color: #FFFFFF;
					padding: 0 12upx;
					border-radius: 4upx;
				}

				.count {
					line-height: 40upx;
					font-size: 26upx;
					color: #FFFFFF;
					border-radius: 4upx;
					padding: 0 12upx;
					@include flex;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 4upx;
					}
				}
			}

			.setting-2 {
				position: absolute;
				left: 0;
				top: 0;
				padding: 10upx;
				@include flex-end;
				width: 100%;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.4000) 0%, rgba(0, 0, 0, 0) 100%);

				.date {
					line-height: 40upx;
					background: rgba(255, 142, 28, .8);
					font-size: 20upx;
					color: #FFFFFF;
					padding: 0 12upx;
					border-radius: 4upx;
				}

				.count {
					line-height: 40upx;
					font-size: 26upx;
					color: #FFFFFF;
					border-radius: 4upx;
					padding: 0 12upx;
					@include flex;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 4upx;
					}
				}
			}

			.pic {
				width: 335upx;
			}

			.title {
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
			}

			.num {
				font-size: 20upx;
				font-weight: 400;
				color: #FF8E1C;
				line-height: 30upx;
				background: #FFFFFF;
				border: 2upx solid #FF8E1C;
				border-radius: 17upx;
				padding: 0 10upx;
				white-space: nowrap;
			}

			.desc {
				font-size: 24upx;
				color: #999999;
				margin: 8upx 0 18upx;
				line-height: 1.6;
				flex-wrap: wrap;
			}

			.user {
				flex-wrap: wrap;
			}

			.price {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;

				text {
					font-size: 24upx;
					font-weight: 400;
					color: #333;
				}
			}

			.avatar {
				width: 42upx;
				height: 42upx;
				border-radius: 50%;
			}

			.name {
				font-size: 24upx;
				color: #333333;
				margin-left: 10upx;
			}
		}
	}

	.address-card {
		height: 230upx;
		background: #FFFFFF;
		border-radius: 16upx;
		@include flex-center;
		flex-direction: column;
		align-items: stretch;

		.input-group {
			@include flex-between;
			margin-bottom: 30upx;
			padding: 0 30upx;
			.input{
				color: rgb(202, 225, 214);
				flex: 1;
				text-align: center;
			}
			.input.cur{
				color: #308a57;
			}
		}
		
		.search{
			position: relative;
			.del{
				position: absolute;
				right: -110upx;
				top: 0;
				color: #ccc;
			}
		}

		image {
			width: 52upx;
			margin: 0 20upx;
		}
	}

	/deep/ .u-mode-center-box {
		background-color: transparent;
	}

	/deep/ .u-drawer-bottom {
		background: transparent !important;
	}

	/deep/ .u-waterfall {
		justify-content: space-between;
	}

	/deep/ .u-column {
		flex: inherit;
	}

	.setting-2 {
		position: absolute;
		left: 0;
		top: 0;
		padding: 10upx;
		@include flex-end;
		width: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.4000) 0%, rgba(0, 0, 0, 0) 100%);

		.date {
			line-height: 40upx;
			background: rgba(255, 142, 28, .8);
			font-size: 20upx;
			color: #FFFFFF;
			padding: 0 12upx;
			border-radius: 4upx;
		}

		.count {
			line-height: 40upx;
			font-size: 26upx;
			color: #FFFFFF;
			border-radius: 4upx;
			padding: 0 12upx;
			@include flex;

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 4upx;
			}
		}
	}
</style>
